<template>
  <view class="order">
    <view class="order-tabs">
      <u-tabs-swiper ref="tabs"
                     :current="current"
                     bar-width="180"
                     active-color="red"
                     @change="handleChange"
                     :list="list"
                     :is-scroll="false"></u-tabs-swiper>
    </view>
    <view class="order-list">
      <block v-if="current===0" class="order-cell">
        <u-cell-group>
          <u-cell-item title="订单编号"
                        :arrow="false"
                       value="HMD202001090000004892"
                       ></u-cell-item>
          <u-cell-item title="订单金额"
                        :arrow="false"
                        :value-style="{color:'red'}"
                       value="￥3999"></u-cell-item>
          <u-cell-item title="订单日期"
                        :arrow="false"
                       value="2020/1/18 18:32:22"></u-cell-item>
        </u-cell-group>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: '全部',
        },
        {
          name: '待付款',
        },
        {
          name: '待收货',
        },
      ],
      current: 0,
    }
  },
  methods: {
    handleChange(current) {
      this.current = current
    },
  },
}
</script>

<style lang="scss" scoped>
.order{
    height: 100vh;
    background-color: #f9f9f9;
}
.order-cell{
    margin-bottom: 20rpx;
}
</style>